<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link rel="stylesheet" href="/css/cultivateWeb/login.css">
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<body style=" height: 100%;width: 100%; position: absolute;">
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header(false)"></header>
<style>
    button[disabled], html input[disabled]{
        cursor: not-allowed;background: #666;
    }
</style>
<div class="logPage" style="background: url('/img/loginbj.png') no-repeat; background-size: 100% 100%;
    height: calc(100% - 150px);display: flex;  align-items: center;  justify-content: center;">
    <img src="/img/loginleft.png" alt="图片" style=" position: inherit;  height: 600px;  width: 900px;">

    <section style="position: inherit;   position: inherit;    height: 600px; width: 500px;   padding: 80px 40px;">
        <style>
            label.error {
                left:6px;
                bottom:-40px;
                font-size: 15px;
                width: 100%;
            }
        </style>
        <div class="div_1">
            <div class="div_2">
                <span style="width:365px;font-size: 24px;font-weight:bold;text-align: center;margin: 0 auto; color:#1b648e;">重置密码</span>
            </div>
            <div  style=" display: flex;  flex-direction: column; justify-content: center;" id="log">
                <form id="signupForm" class="layui-form">
                    <div class="div_3" style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input style="width: calc(100% - 90px);"  id="mobile" name="mobile" type="number" class=" layui-input" placeholder="请输入手机号"/>

                            <button type="button" onclick="send(this)" class="layui-btn layui-bg-blue layui-input-split layui-input-suffix "
                                    style="width: 100px;pointer-events: painted;">获取验证码</button>
                        </div>

                    </div>
                    <div class="div_3" style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input  name="code" id="code" type="text" class=" layui-input" placeholder="请输入验证码"/>

                        </div>
                    </div>
                    <div class="div_3" style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input  name="newPassWord" id="newPassWord" type="password"
                                    class=" layui-input" autocomplete="off" placeholder="请输入8位数新密码" lay-affix="eye"/>

                        </div>
                    </div>
                    <div class="div_3" style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input  name="password" id="password" type="password" class=" layui-input"
                                    autocomplete="off" placeholder="请输入您的密码" lay-affix="eye"/>

                        </div>
                    </div>
<!--                    <div class="div_3">-->
<!--                        <span class="sp_2">手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input  class="in_1" /></span>-->
<!--                    </div>-->
<!--                    <div class="div_3">-->
<!--                        <span class="sp_2">验&nbsp;&nbsp;证&nbsp;&nbsp;码：<input name="code" id="code" type="text" class="in_2" />-->
<!--                            <input type="button" onclick="send(this)" class="bt_1" value="获取验证码" />-->
<!--                            </span>-->
<!--                    </div>-->
<!--                    <div class="div_3">-->
<!--                        <span class="sp_2">新&nbsp;&nbsp;密&nbsp;&nbsp;码：<input name="newPassWord" id="newPassWord" type="password" class="in_1" /></span>-->
<!--                    </div>-->
<!--                    <div class="div_3">-->
<!--                        <span class="sp_2">确认密码：<input name="password" id="password" type="password" class="in_1" /></span>-->
<!--                    </div>-->
                    <br/>
                    <div class="div_3">
                        <button type="submit" style="width: 100%;" class="layui-btn layui-btn-normal">提交</button>
<!--                        <span class="sp_2"><button type="submit" class="bt_2">提交</button></span>-->
                        <div style="display: flex; justify-content: space-between;">
                            <span class="layui-btn" style="background: none;padding: 0;margin: 0;width: 100px;
                       text-align: left;   margin-top: 10px;  color: #1065a0; font-size: 14px; ">
                                 <a style="color: #1065a0; font-size: 14px;" href="/cultivate/cultivateLogins?name=0">
                                   登录
                            </a></span>


                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

</div>

<!--<div class="footer" th:include="cultivateWeb/header :: footer"></div>-->

</body>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>

<script type="text/javascript">

    $(function () {
        validateRule();
    });
    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });

    var countdown = 60;
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            $(val).text("获取验证码")
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            $(val).text("重新发送(" + countdown + ")")
            countdown--;
            var myVar = setTimeout(function () {
                settime(val)
            }, 1000)
        }
    }

    function checkMobile(sMobile) {
        if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(sMobile))) {
            layer.msg('手机号码填写错误，请填写正确的手机格式', {
                icon: 2,
                time: 2000
            });
            document.mobileform.mobile.focus();
            return false;
        }
        return true;
    }

    function send(val) {
        var name = $("#mobile").val();
        val.setAttribute("disabled", true);
        if (name.length != 0) {
            $.ajax({
                url: '/jzApi/utils/sendPassWordCode',
                type: 'POST',
                data: {mobile: name, wxId: 103},
                success: function (data) {
                    checkMobile(name);
                    if (data == 1) {
                        val.removeAttribute("disabled");
                        $(val).text("获取验证码")
                        countdown = 60;
                        layer.msg("此手机号码已注册", {icon: 0, time: 1000})
                    } else {
                        layer.msg("发送成功");
                        $(val).text("重新发送(" + countdown + ")")
                        countdown--;
                        setTimeout(function () {
                            settime(val)
                        }, 1000)
                    }
                }
            })
        } else {
            layer.msg('请输入手机号！');
            val.removeAttribute("disabled");
        }
    }


    function login() {
        var password = $("#password").val();
        var newPassword = $("#newPassWord").val();
        if (password != newPassword){
            layer.msg("两次密码输入不一致，请修改后提交！")
        }else {
            $.ajax({
                url: "/jzApi/utils/forgetPassWord",
                type:'POST',
                data:$("#signupForm").serialize(),
                success: function (r) {
                    if(r.msg.indexOf('修改成功')>-1){
                        setTimeout(function () {
                            location.href = '/cultivate/cultivateLogins?name=0';
                        }, 1000)
                    }else{
                        layer.msg(r.msg);
                    }
                }
            })
        }
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#signupForm").validate({
            rules: {
                mobile: {
                    required: true,
                    isPhone:true
                },
                code: {
                    required: true
                },
                newPassWord: {
                    required: true,
                    checkPassword1:true,
                    minlength:8,
                    maxlength:15
                },
                password: {
                    required: true
                }
            },
            messages: {
                mobile: {
                    required: icon + "请输入手机号"
                },
                code: {
                    required: icon + "请输入验证码"
                },
                newPassWord: {
                    required: icon + "请输入新密码",
                    minlength:'密码最少8位',
                    maxlength:'密码最长15位'
                },
                password: {
                    required: icon + "请确认新密码"
                }
            }
        })
    }

</script>
</html>